<template>
 	<view class="content">
 		<view class="data-title-color">
 			<view class="data-header">
 				<view class="data-header-left">
 					<view class="line"></view>
 					<view class="data-header-title">合作品牌</view>
 				</view>
 			</view>

 			<view class="data-header-list">
 				<view class="data-header-item">
 					<image class="data-header-item-image" src="../../static/images/common/Mask group.png"></image>
 				</view>
 				<view class="data-header-item2">
 					<image class="data-header-item-image2" src="../../static/images/common/Mask group.png"></image>
 				</view>
 				<view class="data-header-item2">
 					<image class="data-header-item-image2" src="../../static/images/common/Mask group.png"></image>
 				</view>
 			</view>
 		</view>
 		<view class="data-main-color">
 			<view class="data-main">
 				<view class="data-header-left">
 					<view class="line"></view>
 					<view class="data-header-title">楼盘套餐</view>
 				</view>
 			</view>
 			<view class="data-main-list">
 				<view class="data-main-item">
 					<image class="data-main-item-image" src="../../static/images/index/build1.png"></image>
 					<view class="data-main-item-translation">
 						<view class="data-item-title alignment">某某某某某某套餐</view>
 						<view class="data-item-info alignment">150-180m²</view>
 						<view class="data-item-info-right-rmb alignment">￥</view>
 						<view class="data-item-info-right-money alignment">9999</view>
 						<view class="data-item-info-content alignment">套餐具体套餐具体套餐具体套餐具体套餐具体</view>
 					</view>
 				</view>
				<view class="data-main-item">
					<image class="data-main-item-image" src="../../static/images/index/build2.png"></image>
					<view class="data-main-item-translation">
						<view class="data-item-title alignment">某某某某某某套餐</view>
						<view class="data-item-info alignment">150-180m²</view>
						<view class="data-item-info-right-rmb alignment">￥</view>
						<view class="data-item-info-right-money alignment">9999</view>
						<view class="data-item-info-content alignment">套餐具体套餐具体套餐具体套餐具体套餐具体</view>
					</view>
				</view>
				<view class="data-main-item">
					<image class="data-main-item-image" src="../../static/images/index/build1.png"></image>
					<view class="data-main-item-translation">
						<view class="data-item-title alignment">某某某某某某套餐</view>
						<view class="data-item-info alignment">150-180m²</view>
						<view class="data-item-info-right-rmb alignment">￥</view>
						<view class="data-item-info-right-money alignment">9999</view>
						<view class="data-item-info-content alignment">套餐具体套餐具体套餐具体套餐具体套餐具体</view>
					</view>
				</view>
				<view class="data-main-item">
					<image class="data-main-item-image" src="../../static/images/index/build2.png"></image>
					<view class="data-main-item-translation">
						<view class="data-item-title alignment">某某某某某某套餐</view>
						<view class="data-item-info alignment">150-180m²</view>
						<view class="data-item-info-right-rmb alignment">￥</view>
						<view class="data-item-info-right-money alignment">9999</view>
						<view class="data-item-info-content alignment">套餐具体套餐具体套餐具体套餐具体套餐具体</view>
					</view>
				</view>
			
				

 			</view>
 		</view>
 	</view>
 </template>

 <script>
 	export default {
 		data() {
 			return {

 			}
 		},
 		methods: {

 		}
 	}
 </script>

 <style>
 	.data-main-item {
 		width: 316rpx;
 		height: 420rpx;
 		margin-left: 40rpx;
		margin: 10rpx 1px 195rpx 40rpx;
		border-radius: 0px 0px 6px 6px;
 	}

 	.data-main-item-image {
 		width: 316rpx;
 		height: 420rpx;
 		background: #000000;
 		border-radius: 16rpx 16rpx 0rpx 0rpx;
 	}

 	.data-main-item-translation {
 		width: 316rpx;
 		height: 164rpx;
 		background: #ffffff;
 		border-radius: 0rpx 0rpx 12rpx 12rpx;
 		margin-top: -10rpx;
 		box-sizing: border-box;
 		position: absolute;
 		flex-direction: column;
 	}

 	.data-item-title {
 		font-size: 24rpx;
 		font-weight: 500;
 		text-align: CENTER;
 		color: #333333;
 		line-height: 24rpx;
 		margin-top: 16rpx;
 		margin-left: 20rpx;
 	}

 	.data-item-info {
 		font-size: 24rpx;
 		font-weight: 500;
 		text-align: CENTER;
 		color: #666666;
 		line-height: 24rpx;
		margin-top: 4rpx;
		margin-left: 20rpx;
 	}

 	.data-item-info-right-rmb {
		width: 20rpx;
		height: 28rpx !important;
		font-size: 20rpx !important;
		font-weight: 700;
		text-align: CENTER;
		color: #e54040;
		line-height: 20rpx !important;
 		transform: translateX(250%);
		
 	}

 	.data-item-info-right-money {
		width: 78rpx;
		height: 44rpx !important;
		font-size: 32rpx !important;
		font-weight: 700;
		text-align: CENTER;
		color: #e54040;
		line-height: 32rpx !important;
		transform: translateX(70%);
 	}

 	.data-item-info-content{
		width: 280rpx;
		height: 56rpx !important;
		font-size: 20rpx !important;
		color: #666666;
		line-height: 20rpx ;
		margin-left: 20rpx;
		letter-spacing: 1rpx;
		margin-top: 2rpx;
		margin-bottom: 8rpx;
 	}

 	.alignment {
 		height: 17px;
 		font-weight: 500;
 		line-height: 12px;
 		display: inline-block;
 	}

 	.data-main-list {
		transform: translateX(-2.6%);
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
		margin-left: 20rpx;
 	}

 	.data-main-color {
 		background: #f5f5f5;
 	}

 	.data-main {
 		box-sizing: border-box;
 		display: flex;
 		align-items: center;
 		padding: 0 40rpx;
 		justify-content: space-between;
 		margin-bottom: 20rpx;
 	}

 	.data-title-color {
 		width: 750rpx;
 		height: 284rpx;
 		background: #ffffff;
 	}

 	.data-header-list {
 		display: flex;
 		overflow-x: scroll;
 		margin-top: 20rpx;
 	}

 	.data-header-item {
 		width: 280rpx;
 		height: 168rpx;
 		position: relative;
 		margin-left: 40rpx;
 	}

 	.data-header-item-image {
 		width: 280rpx;
 		height: 168rpx;
 		background: #000000;
 		border-radius: 16rpx 16rpx 16rpx 16rpx;

 	}

 	.data-header-item2 {
 		width: 280rpx;
 		height: 168rpx;
 		position: relative;
 		margin-left: 20rpx;

 	}

 	.data-header-item-image2 {
 		width: 280rpx;
 		height: 168rpx;
 		background: #000000;
 		border-radius: 16rpx 16rpx 16rpx 16rpx;

 	}

 	.content {
 		width: 100vw;
 		height: 100vh;
 		box-sizing: border-box;
 		background-color: #f5f5f5;
 	}

 	.data-header {
 		box-sizing: border-box;
 		display: flex;
 		align-items: center;
 		padding: 0 40rpx;
 		justify-content: space-between;
 		margin-bottom: 20rpx;
 	}

 	.data-header-left {
 		display: flex;
 		align-items: center;
 		margin-top: 28rpx;

 	}

 	.data-header-title {
 		color: #333333;
 		font-size: 28srpx;
 		font-weight: 700;
 		margin-left: 20rpx;
 	}

 	.line {
 		width: 6rpx;
 		height: 28rpx;
 		background: #3d9c36;
 	}
 </style>

 <!-- <template>
 	<view class="content">
 		<view class="mask-item">
 			<view class="item-banner">
 				<view class="item-banner-line"></view>
 				<view class="item-banner-text">合作品牌</view>
 			</view>
 			<view class="mask-list-item-image">
 				<view class="mask-item-image">
 					<image src="../../static/images/common/Mask group.png"></image>
 				</view>
 				<view class="mask-item-image">
 					<image src="../../static/images/common/Mask group.png"></image>
 				</view>
 				<view class="mask-item-image">
 					<image src="../../static/images/common/Mask group.png"></image>
 				</view>
 			</view>
 		</view>
 		<view class="project-item">
 			<view class="item-banner">
 				<view class="item-banner-line"></view>
 				<view class="item-banner-text">楼盘套餐</view>
 			</view>
 			<view class="project-list-items">
 				<view class="project-list-item" >
 					<image class="project-list-item-image" src="../../static/images/index/build1.png"></image>
 					<view class="project-list-item-box">
 						<view class="project-list-item-title alignment">某某某某某某套餐</view><br>
 						<view class="project-list-item-houseType alignment">150-180m²</view>
 						<view class="project-list-item-currencyType alignment">￥</view>
 						<view class="project-list-item-price alignment">9999</view><br>
 						<view class="project-list-item-theContent alignment">套餐具体套餐具体套餐具体套餐具体套餐具体</view>
 					</view>
 				</view>
				<view class="project-list-item" >
					<image class="project-list-item-image" src="../../static/images/index/build1.png"></image>
					<view class="project-list-item-box">
						<view class="project-list-item-title alignment">某某某某某某套餐</view><br>
						<view class="project-list-item-houseType alignment">150-180m²</view>
						<view class="project-list-item-currencyType alignment">￥</view>
						<view class="project-list-item-price alignment">9999</view><br>
						<view class="project-list-item-theContent alignment">套餐具体套餐具体套餐具体套餐具体套餐具体</view>
					</view>
				</view>
				<view class="project-list-item" >
					<image class="project-list-item-image" src="../../static/images/index/build1.png"></image>
					<view class="project-list-item-box">
						<view class="project-list-item-title alignment">某某某某某某套餐</view><br>
						<view class="project-list-item-houseType alignment">150-180m²</view>
						<view class="project-list-item-currencyType alignment">￥</view>
						<view class="project-list-item-price alignment">9999</view><br>
						<view class="project-list-item-theContent alignment">套餐具体套餐具体套餐具体套餐具体套餐具体</view>
					</view>
				</view>
				<view class="project-list-item" >
					<image class="project-list-item-image" src="../../static/images/index/build1.png"></image>
					<view class="project-list-item-box">
						<view class="project-list-item-title alignment">某某某某某某套餐</view><br>
						<view class="project-list-item-houseType alignment">150-180m²</view>
						<view class="project-list-item-currencyType alignment">￥</view>
						<view class="project-list-item-price alignment">9999</view><br>
						<view class="project-list-item-theContent alignment">套餐具体套餐具体套餐具体套餐具体套餐具体</view>
					</view>
				</view>
				<view class="project-list-item" >
					<image class="project-list-item-image" src="../../static/images/index/build1.png"></image>
					<view class="project-list-item-box">
						<view class="project-list-item-title alignment">某某某某某某套餐</view><br>
						<view class="project-list-item-houseType alignment">150-180m²</view>
						<view class="project-list-item-currencyType alignment">￥</view>
						<view class="project-list-item-price alignment">9999</view><br>
						<view class="project-list-item-theContent alignment">套餐具体套餐具体套餐具体套餐具体套餐具体</view>
					</view>
				</view>
				<view class="project-list-item" >
					<image class="project-list-item-image" src="../../static/images/index/build1.png"></image>
					<view class="project-list-item-box">
						<view class="project-list-item-title alignment">某某某某某某套餐</view><br>
						<view class="project-list-item-houseType alignment">150-180m²</view>
						<view class="project-list-item-currencyType alignment">￥</view>
						<view class="project-list-item-price alignment">9999</view><br>
						<view class="project-list-item-theContent alignment">套餐具体套餐具体套餐具体套餐具体套餐具体</view>
					</view>
				</view>
 			</view>
 		</view>
 	</view>
 </template>
 
 <script>
 	export default {
 		data() {
 			return {
 				
 			}
 		},
 		methods: {
 
 		}
 	}
 </script>
 
 <style>
 	* {
 		margin: 0 auto;
 		padding: 0 0;
 	}
 	/* 公共banner部分 */
 	.item-banner {
 	box-sizing: border-box;
 	display: flex;
 	align-items: center;
 	padding: 0 40rpx;
 	justify-content: space-between;
 	margin-bottom: 20rpx;
	margin-top: 28rpx;
 	}
 
 	.item-banner-line {
 		width: 6rpx;
 		height: 28rpx;
 		background: #3d9c36;
 		position: absolute;
 		left: 5%;
 	}
 
 	.item-banner-text {
 	    color: #333333;
 	    font-size: 28rpx;
 	    font-weight: 700;
 	    margin-left: 20rpx;
 		line-height: 14px;
 		position: absolute;
 	}
 
 	.content {
 		width: 100vw;
 		height: 100vh;
 		box-sizing: border-box;
 		background-color: #f5f5f5; //盒子模型
 	}
 	
 	/* 合作品牌 */
 	
 /* 	.mask-item {
 		width: 750rpx;
 		height: 284rpx;
 		background: #ffffff;
 	}
 */
 	.mask-list-item-image {
 		padding-top: 24rpx;
 		display: flex;
 		flex-direction: row;
 		overflow-x: scroll;
 	}
 
 	.mask-item-image {
 		width: 142px;
 		height: 84px;
 		padding-left: 20px;
 	}
 
 	.mask-item-image image {
 		width: 142px;
 		height: 84px;
 	}
 	/* 楼盘套餐 */
 	.project-list-items{
 		width: 357px;
 		transform: translateX(-2%);
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: center;
 	}
 	.project-list-item{
 		width: 158px;
 		height: 292px;
 		margin: 14px 4px 4px 4px;
 		border-radius: 0px 0px 6px 6px;
 	}
 	.project-list-item-image{
 		width: 158px;
 		height: 210px;
 		border-radius: 0px 0px 6px 6px;
 	}
 	.project-list-item-box{
 		width: 158px;
 		height: 81px;
 		background: #ffffff;
 		border-radius: 0px 0px 6px 6px;
 	}
 	.project-list-item-title{
 		width: 116px;
 		color: #333333;
 		font-size: 14px;
 		font-weight: bold!important;
 		transform: translateX(10%);
 	}
 	.project-list-item-houseType{
 		width: 75px;
 		color: #666666;
 		font-size: 14px;
 		transform: translateX(12%);
 	}
 	.project-list-item-currencyType{
 		width: 10px;
 		height: 16px!important;
 		font-size: 12px!important;
 		color: #e54040;
 		line-height: 10px!important;
 		transform: translateX(250%);
 	}
 	.project-list-item-price{
 		width: 39px;
 		height: 22px!important;
 		font-size: 18px!important;
 		color: #e54040;
 		transform: translateX(70%);
 		line-height: 16px!important;
 	}
 	.project-list-item-theContent{
 		width: 140px;
 		height: 28px!important;
 		font-size: 12px!important;
 		color: #666666;
 		line-height: 10px!important;
 		transform: translateX(5%);
 	}
 	.alignment{
 		height: 17px;
 		font-family: PingFang SC, PingFang SC-Medium;
 		font-weight: 500;
 		line-height: 12px;
 		display: inline-block;
 	}
 </style>
 -->
